import React, { useState } from 'react'

export default function App() {
    let [username, setUsername] = useState('atguigu');
    let [password, setPassword] = useState('123123');
    const save = (e)=>{
        e.preventDefault();
        console.log(username);
        console.log(password);
        
        
    }
    // 使用方式1
    function changeStatus(e,fun) {
       fun(e.target.value)
    }
    /* // 使用方式2 高阶函数，将一次性接收参数，转换为分阶段接收参数
    function heightSum(a){
        return function(b) {
            return function(c) {
                return a + b + c
            }
        }
    }
    // 调用方式 heightSum(1)(2)(3) */

   /*  // 用于这个函数的调用方式
    function heightSum(fn) {
        return (e) => {
            fn(e.target.value)
        }
    }
    // 调用 onChange={heightSum(setUsername)} */
    return (
        <div>
            <h3>受控组件</h3>
            <form onSubmit={save}>
                <p>姓名： <input type="text" name="username" value={username} onChange={(e)=> changeStatus(e,setUsername)} /></p>
                <p>密码： <input type="text" name="password" value={password} onChange={(e)=> changeStatus(e,setPassword)} /></p>
                <p><button>保存</button></p>
            </form>
        </div>
    )
}
